<template>
  <div class="app-wrapper" :class="theme">
    <!-- 侧边栏容器 -->
    <aside class="sidebar-container" :class="{ 'hidden': sidebarHidden, 'dark-bg': theme === 'dark' }">

      <Logo />

      <el-menu unique-opened :default-active="activeMenu" class="el-menu-vertical-demo" @select="handleMenuSelect"
        :collapse="sidebarHidden">
        <Menus :menu-list="menus" />
      </el-menu>
    </aside>

    <!-- 头部组件 -->
    <header class="header" :class="{ 'sidebar-hidden': sidebarHidden, 'dark-bg': theme === 'dark' }">
      <!-- 这里可以添加其他header组件 -->
      <Breadcrumb />
      <Tools />


    </header>

    <!-- 标签栏 -->
    <div class="tag-container" :class="{ 'dark-bg': theme === 'dark' }">
      <Tag />
    </div>

    <!-- 容器 -->
    <div class="container" :class="{ 'sidebar-hidden': sidebarHidden }">
      <!-- 主内容区域 -->
      <main class="main-content">
        <router-view />
      </main>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useLayoutStore } from '@/store/layout'
import useUserStore from '@/store/modules/user.ts'
import Logo from '@/layouts/logo/index.vue'
import Tools from '@/layouts/header/tools.vue'
import Breadcrumb from '@/layouts/header/breadcrumb.vue'
import Tag from '@/layouts/tag/index.vue'

import Menus from '@/layouts/menus/index.vue'




const router = useRouter()
const route = useRoute()
const layoutStore = useLayoutStore()
const userStore = useUserStore()

// 计算属性
const sidebarHidden = computed(() => layoutStore.layoutSettings.sidebarHidden)
const theme = computed(() => layoutStore.layoutSettings.theme)
const activeMenu = computed(() => route.path)
const menus = computed(() => userStore.userState.menus)




const handleMenuSelect = (key: string) => {
  router.push(key)
}

</script>

<style scoped lang="scss">
// 基础样式
.app-wrapper {
  height: 100vh;
  width: 100%;

  // 侧边栏样式
  .sidebar-container {
    width: $sidebar-width;
    height: 100vh;
    transition: all 0.3s ease-in-out;
    overflow: hidden;
    background-color: $bg-color-light;
    box-shadow: $box-shadow-light-sidebar;
    /* 增强阴影效果 */


    &.hidden {
      width: $min-sidebar-width;
    }

    &.dark-bg {
      background-color: $bg-color-dark;
      box-shadow: 2px 0 8px rgba(0, 0, 0, 0.2);
    }

    .el-menu-vertical-demo {
      height: calc(100vh - $logo-height);
      border-right: none;
      width: 100%;
    }
  }

  // 头部样式
  .header {
    position: fixed;
    top: 0;
    left: $sidebar-width + $sidebar-header-gap;
    height: $header-height;
    width: calc(100% - $sidebar-width - $sidebar-header-gap);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: $bg-color-light;
    border-bottom: 1px solid #f0f0f0;
    box-shadow: $box-shadow-light-header;
    transition: all 0.3s ease-in-out;
    box-sizing: border-box;
    overflow: hidden;

    &.sidebar-hidden {
      width: calc(100% - $min-sidebar-width);
      left: $min-sidebar-width + $sidebar-header-gap;

    }

    &.dark-bg {
      border-bottom: 1px solid #333;
      background-color: $bg-color-dark;

    }
  }

  // 标签栏样式
  .tag-container {
    position: fixed;
    top: $header-height + $tag-header-gap;
    left: $sidebar-width + $sidebar-header-gap;
    width: calc(100% - $sidebar-width - $sidebar-header-gap);
    height: $tag-height;
    border-bottom: 1px solid $border-color;
    box-shadow: $box-shadow-light-header;
    transition: all 0.3s ease-in-out;

      &.dark-bg {
      border-bottom: 1px solid #333;
    }
  }

  // 容器样式
  .container {
    position: absolute;
    top: $header-height + $tag-height + $tag-header-gap;
    left: $sidebar-width + $sidebar-header-gap;

    width: calc(100% - $sidebar-width - $sidebar-header-gap);

    height: calc(100vh - $header-height - $tag-height - $tag-header-gap);
    /* 调整高度以适应顶部间距 */
    transition: all 0.3s ease-in-out;
    overflow-y: scroll;


    &.sidebar-hidden {
      width: calc(100% - $min-sidebar-width);
      left: $min-sidebar-width + $sidebar-header-gap;
    }
  }
}
</style>